<template>
    <div class="article-detail">
        <nut-tabs v-model="active" color="#e222ff" align="left">
            <nut-tab-pane v-for="(tab, index) in tabs" :key="index" :title="tab.title" :pane-key="tab.id">
                <component :is="tab.component"></component>
            </nut-tab-pane>
        </nut-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import NewMessage from './NewMessage/index.vue'

const active = ref(1)

const tabs = [
    { id: 1, title: '最新消息', component: NewMessage },
    { id: 2, title: '游戏更新', component: '' },
    { id: 3, title: '官方公告', component: '' }
]
</script>

<style lang="scss" scoped>
.article-detail {
    width: 100%;
    min-height: 50vh;
    color: #fff;
    :deep(.nut-tabs) {
        .nut-tab-pane {
            padding: 5px 0;
            background: transparent;
        }
    }
}
</style>
